import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Text
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import Layer from '../../../../utils/Layer';

export default class editNickname extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "编辑昵称", // 头部标题
      titleColor: "#333", // 标题颜色
      editNickname: null, // 昵称
      rightText: "完成", // 右边完成按钮
      editNickname: this.props.navigation.state.params.editNickname, // 原本的昵称
    };
  }

  componentDidMount = () => { }
  // 昵称 编辑保存方法
  uploadEditNickname = () => {
    if (this.state.editNickname != '') {
      this.props.navigation.state.params.refresh(this.state.editNickname)
      this.props.navigation.goBack()// 返回上一级
    } else {
      Layer.showMsg('昵称不能为空')
    }
  }
  // 昵称 修改方法
  onChangeText = (inputText) => {
    this.setState({
      editNickname: inputText
    })
  }
  render() {
    return (
      <View style={styles.warperEditNickname}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={this.state.titleColor}
          right={this.state.rightText}
          pressRight={() => {
            this.uploadEditNickname() // 完成 保存
          }}
        />
        <View style={styles.editNickname}>
          {/* 昵称 */}
          <View style={styles.editNicknameBox}>
            <TextInput
              onChangeText={inputText => this.onChangeText(inputText)}
              value={this.state.editNickname}
              placeholder='请输入你要修改的昵称'
              maxLength={7}
              style={styles.editNicknameInput} />
          </View>
          {/* 文本提示 输入格式 */}
          <Text style={styles.formatTips}>请输入你要修改的昵称，支持英文、数字</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warperEditNickname: {
    flex: 1,
    backgroundColor: "rgba(240,240,240,0.3)",
  },

  editNicknameBox: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 20,
    width: "100%",
    backgroundColor: "#fff"
  },
  editNicknameInput: {
    borderWidth: 0,
    width: "100%",
    paddingLeft: 15
  },
  formatTips: {
    fontSize: 14,
    color: "#999",
    padding: 15
  },

})